<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <title>系统登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <!--[if lt IE 9]>
    <script th:src="@{/components/jquery-flot/excanvas.min.js}"></script>
    <script th:src="@{http://html5shiv.googlecode.com/svn/trunk/html5.js}"></script>
    <script th:src="@{http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js}"></script>
    <![endif]-->

    <link rel="stylesheet" type="text/css" th:href="@{/plugins/cloudadmin/css/cloud-admin.css}" >
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/plugins/bootstrap/css/bootstrap.css}">
    <!-- Font Awesome -->
    <link th:href="@{/plugins/font-awesome/css/font-awesome.css}" rel="stylesheet">
    <!--&lt;!&ndash; DATE RANGE PICKER &ndash;&gt;-->
    <!--<link rel="stylesheet" type="text/css" th:href="@{/components/bootstrap-daterangepicker/daterangepicker.css}" />-->
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/jquery-uniform/css/uniform.default.min.css}" />
    <!-- ANIMATE -->
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/animate-css/animate.min.css}" />

    <style>
        #vrifyCodeImg {
            display:block;
            width:100%;
            height: 34px;
            vertical-align: middle;
        }
    </style>

</head>
    <body class="login">
        <!-- PAGE -->
        <section id="page">
            <!-- HEADER -->
            <header>
                <!-- NAV-BAR -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <div id="logo">
                                <a href="index.html"><img th:src="@{/plugins/cloudadmin/img/logo/logo.png}" height="40" alt="logo name" /></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/NAV-BAR -->
            </header>
            <!--/HEADER -->
            <!-- LOGIN -->
            <section id="login_bg" class="visible">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <div id="login-input" class="login-box">
                                <h2 class="bigintro">账号登录</h2>
                                <div class="divide-40"></div>
                                <div th:if="${message ne null}" class="alert alert-block alert-danger fade in">
                                    <p th:inline="text">[[${message}]]</p>
                                </div>
                                <form id="form" role="form">
                                    <div class="form-group">
                                        <label for="tank" >用户名</label>
                                        <i class="fa fa-user"></i>
                                        <input type="text" class="form-control" name="tank" id="tank" >
                                    </div>
                                    <div class="form-group">
                                        <label for="fighter">密码</label>
                                        <i class="fa fa-lock"></i>
                                        <input type="password" class="form-control" name="fighter" id="fighter" >
                                    </div>
                                    <div th:if="${hide_verification_code} == false" class="form-group">
                                        <div class="row">
                                            <div class="col-md-7">
                                                <label for="missile">验证码</label>
                                                <i class="fa fa-qrcode"></i>
                                                <input type="text" class="form-control" name="missile" id="missile">
                                            </div>
                                            <div class="col-md-5">
                                                <label for="vrifyCodeImg">&nbsp;</label>
                                                <img id="vrifyCodeImg" src="" onclick="refresh()" alt="点击刷新" style="margin: 0px"/>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <form id="login-form" role="form" th:action="@{/login}" method="POST">
                                    <div>
                                        <input type="hidden" id="symmetric" name="symmetric" th:value="${soup_spoon}">
                                        <input type="hidden" id="verification_category" name="verification_category" th:value="${verification_category}">
                                        <input type="hidden" th:name="${vulgar_tycoon}" th:id="${vulgar_tycoon}">
                                        <input type="hidden" th:name="${beast}" th:id="${beast}">
                                        <input type="hidden" th:name="${graphic}" th:id="${graphic}">
                                    </div>
                                    <div>
                                        <label class="checkbox">
                                            <input type="checkbox" class="uniform" value="true" name="remember-me">下次自动登录
                                        </label>
                                        <button id="disco" type="button" class="btn btn-danger">登录</button>
                                    </div>
                                </form>
                                <!-- SOCIAL LOGIN -->
                                <div class="divide-20"></div>
                                <div class="center">
                                    <strong>第三方账号登录</strong>
                                </div>
                                <div class="divide-20"></div>
                                <div class="social-login center">
                                    <a class="btn btn-primary btn-lg">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                    <a class="btn btn-info btn-lg">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                    <a class="btn btn-danger btn-lg">
                                        <i class="fa fa-google-plus"></i>
                                    </a>
                                </div>
                                <!-- /SOCIAL LOGIN -->
                                <div class="login-helpers">
                                    <a href="#" onclick="swapScreen('forgot_bg');return false;">忘记密码?</a> <br>
                                    还没有系统账号? <a href="#" onclick="swapScreen('register_bg');return false;">立即注册!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--/LOGIN -->
            <!-- REGISTER -->
            <section id="register_bg" class="font-400">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <div class="login-box">
                                <h2 class="bigintro">Register</h2>
                                <div class="divide-40"></div>
                                <form role="form">
                                    <div class="form-group">
                                        <label for="exampleInputName">Full Name</label>
                                        <i class="fa fa-font"></i>
                                        <input type="text" class="form-control" id="exampleInputName" >
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputUsername">Username</label>
                                        <i class="fa fa-user"></i>
                                        <input type="text" class="form-control" id="exampleInputUsername" >
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">Email address</label>
                                        <i class="fa fa-envelope"></i>
                                        <input type="email" class="form-control" id="exampleInputEmail2" >
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Password</label>
                                        <i class="fa fa-lock"></i>
                                        <input type="password" class="form-control" id="exampleInputPassword1" >
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword2">Repeat Password</label>
                                        <i class="fa fa-check-square-o"></i>
                                        <input type="password" class="form-control" id="exampleInputPassword2" >
                                    </div>
                                    <div>
                                        <label class="checkbox"> <input type="checkbox" class="uniform" value=""> I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a></label>
                                        <button type="submit" class="btn btn-success">Sign Up</button>
                                    </div>
                                </form>
                                <!-- SOCIAL REGISTER -->
                                <div class="divide-20"></div>
                                <div class="center">
                                    <strong>Or register using your social account</strong>
                                </div>
                                <div class="divide-20"></div>
                                <div class="social-login center">
                                    <a class="btn btn-primary btn-lg">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                    <a class="btn btn-info btn-lg">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                    <a class="btn btn-danger btn-lg">
                                        <i class="fa fa-google-plus"></i>
                                    </a>
                                </div>
                                <!-- /SOCIAL REGISTER -->
                                <div class="login-helpers">
                                    <a href="#" onclick="swapScreen('login_bg');return false;"> Back to Login</a> <br>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--/REGISTER -->
            <!-- FORGOT PASSWORD -->
            <section id="forgot_bg">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <div class="login-box">
                                <h2 class="bigintro">Reset Password</h2>
                                <div class="divide-40"></div>
                                <form role="form">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">Enter your Email address</label>
                                        <i class="fa fa-envelope"></i>
                                        <input type="email" class="form-control" id="exampleInputEmail1" >
                                    </div>
                                    <div>
                                        <button type="submit" class="btn btn-info">Send Me Reset Instructions</button>
                                    </div>
                                </form>
                                <div class="login-helpers">
                                    <a href="#" onclick="swapScreen('login_bg');return false;">Back to Login</a> <br>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- FORGOT PASSWORD -->
        </section>
        <!--/PAGE -->

        <!-- Placed at the end of the document so the pages load faster -->
        <!-- JQUERY -->
        <script th:src="@{/plugins/jquery/jquery-2.1.4.min.js}"></script>
        <!-- JQUERY UI-->
        <script th:src="@{/plugins/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js}"></script>
        <!-- BOOTSTRAP -->
        <script th:src="@{/plugins/bootstrap/js/bootstrap.min.js}"></script>
        <!-- Bootstrap Notify Plugin Js -->
        <script th:src="@{/plugins/bootstrap-notify/bootstrap-notify.js}"></script>
        <!-- BACKSTRETCH -->
        <script type="text/javascript" th:src="@{/plugins/jquery-backstretch/jquery.backstretch.min.js}"></script>
        <!-- UNIFORM -->
        <script type="text/javascript" th:src="@{/plugins/jquery-uniform/jquery.uniform.min.js}"></script>
        <script type="text/javascript" th:src="@{/plugins/jquery-base64/jquery.base64.js}"></script>
        <!-- CUSTOM SCRIPT -->
        <script th:src="@{/plugins/cloudadmin/js/script.js}"></script>
        <!-- CUSTOM SCRIPT -->
        <script th:src="@{/features/common.js}"></script>

        <script th:src="@{/plugins/crypto-js/rollups/aes.js}"></script>
        <script th:src="@{/plugins/crypto-js/components/mode-ecb-min.js}"></script>
        <script th:src="@{/features/security/system-security.js}"></script>

        <script type="text/javascript">

            let verification_category = '[[${verification_category}]]';

            window.onload = function() {
                $.SECURITY.informations();
                loadCaptcha();
            };

            function login() {

                let tank = $('#tank').val();
                let fighter = $('#fighter').val();
                let missile = $('#missile').val();
                let symmetric = $('#symmetric').val();

                let data =  $.SECURITY.encryptFormData(tank, fighter, missile, symmetric)

                let vulgarTycoon = '#' + '[[${vulgar_tycoon}]]';
                let beast = '#' + '[[${beast}]]';
                let graphic = '#' + '[[${graphic}]]';

                $(vulgarTycoon).val(data.encryptTank);
                $(beast).val(data.encryptFighter);
                $(graphic).val(data.encryptMissile);

                $('#login-form').submit();
            }

            function loadCaptcha() {
                let url = '[[${#request.getContextPath()}]]/open/captcha'
                let sessionId = '[[${#session.id}]]';
                $.http.get(url, {identity:sessionId, category: verification_category}, 'json')
                    .then(result => {
                        let src = result.data.graphicImageBase64;
                        $('#vrifyCodeImg').attr('src', src);
                    })
                    .catch(error => {
                        $.information.error(error);
                    });
            }

            function refresh() {
                // let src = '[[${#request.getContextPath()}]]/defaultKaptcha?d='+new Date()*1;
                // $('#vrifyCodeImg').attr('src', src);
                loadCaptcha();
            }

            function swapScreen(id) {
                jQuery('.visible').removeClass('visible animated fadeInUp');
                jQuery('#'+id).addClass('visible animated fadeInUp');
            }

            $('#disco').click(function () {
                login();
            });

            jQuery(document).ready(function() {

                $.backstretch([
                    "[[${#request.getContextPath()}]]/plugins/cloudadmin/img/login/1.jpg"
                    , "[[${#request.getContextPath()}]]/plugins/cloudadmin/img/login/2.jpg"
                    , "[[${#request.getContextPath()}]]/plugins/cloudadmin/img/login/3.jpg"
                    , "[[${#request.getContextPath()}]]/plugins/cloudadmin/img/login/4.jpg"
                ], {duration: 3000, fade: 750});

                App.setPage("login_bg");  //Set current page
                App.init(); //Initialise plugins and elements
            });

            jQuery(document).keydown(function (event) {
                if (event.keyCode === 13) {
                    $('#disco').click();
                }
            });
        </script>
        <!-- /JAVASCRIPTS -->
    </body>
</html>